<template>
    <view class="container">
        <!-- 设备详情区域 - 不使用up-card -->
        <view class="device-info-card">
            <view class="device-header">
                <text class="device-name">{{ deviceInfo.sbmc }}</text>
                <view class="status-badge" :class="deviceInfo.status ? 'active' : 'inactive'">
                    <text>{{ deviceInfo.status ? '运行中' : '已关机' }}</text>
                </view>
            </view>

            <view class="info-grid">
                <view class="info-item">
                    <text class="info-label">设备编号</text>
                    <text class="info-value">{{ deviceInfo.sbbh }}</text>
                </view>
                <view class="info-item">
                    <text class="info-label">使用部门</text>
                    <text class="info-value">{{ deviceInfo.bmmc }}</text>
                </view>
                <!-- <view class="info-item">
                    <text class="info-label">累计台时</text>
                    <text class="info-value">{{ deviceInfo.totalHours }}小时</text>
                </view> -->
            </view>
        </view>

        <!-- 历史记录标题 -->
        <view class="section-title">
            <text>台时记录</text>
        </view>

        <!-- 历史记录列表 -->
        <view class="record-list">
            <view class="record-item" v-for="item in recordList" :key="item.id">
                <view class="record-header">
                    <text class="record-date">{{ item.date }}</text>
                    <text class="record-hours">
                        {{ calculateTimeDifference(item.beginTime, item.endTime) }}
                    </text>
                </view>
                <view class="record-detail">
                    <view class="record-time-row">
                        <text class="record-time-label">开机时间：</text>
                        <text class="record-time-value">{{ item.beginTime }}</text>
                    </view>
                    <view class="record-time-row">
                        <text class="record-time-label">关机时间：</text>
                        <text class="record-time-value">{{ item.endTime || '--' }}</text>
                    </view>
                </view>
                <view class="record-operator" v-if="item.operator">
                    <text>操作人：{{ item.operator }}</text>
                </view>
            </view>

            <!-- 加载更多 -->
            <!-- <up-loadmore :status="loadStatus" marginTop="20" marginBottom="20" /> -->

        </view>
        <view>
            <up-loadmore :status="loadStatus" lineColor="#E6E8EB" dashed line />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            deviceId: '', // 从路由参数获取
            deviceInfo: {},
            transmitData: {},
            recordList: [],
            pageNum: 1,
            pageSize: 10,
            total: 3,
            loadStatus: 'nomore'
        }
    },
    onLoad(options) {
        console.log(options.deviceId)
        const decodedStr = decodeURIComponent(options.deviceId);
        const deviceData = JSON.parse(decodedStr);
        this.deviceId = deviceData.sbbh;
        this.transmitData = deviceData;
        // 实际项目中这里调用API获取数据
        this.loadDeviceInfo()
        this.loadRecordList()
    },
    onReachBottom() {
        if (this.loadStatus === 'nomore') return
        this.pageNum++
        this.loadRecordList()
    },
    methods: {
        async loadDeviceInfo() {
            const res = await this.$commonUnits.postRequest(
                "sbby.sbtzyxts.sbtsSelect.mobile",
                { "sbbh": this.deviceId }
            );
            if (res.res.endTime === null) {
                this.deviceInfo = {
                    bmmc: this.transmitData.bmmc,
                    sbbh: this.transmitData.sbbh,
                    sbmc: this.transmitData.sbmc,
                    status: true
                };
            } else {
                this.deviceInfo = {
                    bmmc: this.transmitData.bmmc,
                    sbbh: this.transmitData.sbbh,
                    sbmc: this.transmitData.sbmc,
                    status: false
                };
            }

        },
        async loadRecordList() {
            this.loadStatus = 'loading'

            // 实际API请求
            const params = {
                sbbh: this.deviceId,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }

            console.log(params)

            this.$commonUnits.postRequest('sbby.sbtzyxts.sbtsjlList.mobile', params)
                .then(res => {
                    if (this.pageNum === 1) {
                        this.recordList = res.res.list
                    } else {
                        this.recordList = [...this.recordList, ...res.res.list]
                    }
                    this.total = res.res.total
                    this.loadStatus = this.recordList.length >= this.total ? 'nomore' : 'loadmore'
                })
                .catch(() => {
                    this.loadStatus = 'loadmore'
                    this.$u.toast('获取记录失败')
                })
        },
        calculateTimeDifference(beginTime, endTime) {
            const start = new Date(beginTime)
            const end = endTime ? new Date(endTime) : new Date()

            const diffMs = end - start
            const diffMinutes = Math.floor(diffMs / (1000 * 60))

            // 超过60分钟显示小时+分钟
            if (diffMinutes >= 60) {
                const hours = Math.floor(diffMinutes / 60)
                const mins = diffMinutes % 60
                return `${hours}小时${mins}分钟`
            }

            return `${diffMinutes}分钟`
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20rpx;
    background-color: #f7f7f7;
    min-height: 100vh;
    box-sizing: border-box;
}

/* 设备信息卡片 - 自定义样式 */
.device-info-card {
    margin: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.05);

    .device-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .device-name {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            flex: 1;
        }

        .status-badge {
            padding: 6rpx 16rpx;
            border-radius: 20rpx;
            font-size: 24rpx;

            &.active {
                background-color: #e1f3d8;
                color: #67c23a;
            }

            &.inactive {
                background-color: #fde2e2;
                color: #f56c6c;
            }
        }
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;

        .info-item {
            display: flex;
            flex-direction: column;

            .info-label {
                font-size: 26rpx;
                color: #909399;
                margin-bottom: 8rpx;
            }

            .info-value {
                font-size: 28rpx;
                color: #333;
                font-weight: 500;
            }
        }
    }
}

.section-title {
    margin: 30rpx 20rpx 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.record-list {
    margin: 0 20rpx 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 30rpx;
    box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.05);

    .record-item {
        padding: 30rpx 0;
        border-bottom: 1rpx solid #f0f0f0;

        &:last-child {
            border-bottom: none;
        }

        .record-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;

            .record-date {
                font-size: 30rpx;
                color: #333;
                font-weight: 500;
            }

            .record-hours {
                font-size: 30rpx;
                color: #2979ff;
                font-weight: bold;
            }
        }

        .record-detail {
            margin-bottom: 15rpx;

            .record-time-row {
                display: flex;
                margin-bottom: 10rpx;

                .record-time-label {
                    font-size: 26rpx;
                    color: #666;
                    width: 150rpx;
                }

                .record-time-value {
                    font-size: 26rpx;
                    color: #333;
                    flex: 1;
                }
            }
        }

        .record-operator {
            font-size: 24rpx;
            color: #999;
        }
    }
}
</style>